<template>
  <div class="upgrading-chain-box">
    <!--标题-->
    <span>收件人</span>
    <!--第一收件人-->
    <div class="first-recipient-box">
      <span>第一收件人</span>
      <FormItem>
        <Select
          style="width: 300px; margin-left: 148px"
          show-search
          mode="multiple"
          placeholder="添加收件人"
          :options="recipientSelectOptions"
          :show-arrow="false"
          v-model:value="firstSelect"
          @focus="getRecipientSelectList(params)"
          @change="getSelectRecipient($event, 0)"
          :filter-option="filterOption"
        />
      </FormItem>
      <Button class="mr-2" type="primary">创建收件人</Button>
    </div>
    <!--其他收件人-->
    <div class="first-recipient-box" v-for="(item, index) in recipientList.slice(1)" :key="item.id">
      <span>之后</span>
      <FormItem>
        <Select
          show-search
          style="width: 200px"
          :options="ruleTimeSelectList"
          @change="getSelectTime($event, index + 1)"
          :show-arrow="true"
        />
      </FormItem>
      <span style="margin-left: 10px">通知</span>
      <FormItem>
        <Select
          style="width: 300px"
          show-search
          mode="multiple"
          placeholder="添加收件人"
          :options="recipientSelectOptions"
          :show-arrow="false"
          @focus="getRecipientSelectList(params)"
          @change="getSelectRecipient($event, index + 1)"
          :filter-option="filterOption"
        />
      </FormItem>
      <Button class="mr-2" type="primary">创建收件人</Button>
      <Icon
        icon="material-symbols:close-rounded"
        @click="deleteRecipientByIndex(index + 1)"
        title="移除"
        size="25"
      />
    </div>
    <!--添加阶段-->
    <Button class="mr-2" type="primary" @click="addStage">添加阶段</Button>
    <!--停止逐步升级，将告警状态设置为：-->
    <div>停止逐步升级，将告警状态设置为：</div>
    <div>告警状态列表</div>
    <FormItem>
      <Select
        style="width: 100%"
        show-search
        mode="multiple"
        placeholder="任何状态"
        :options="ruleAlarmSelectList"
        :show-arrow="true"
        :filter-option="filterOption"
        :disabled="recipientList.length <= 1"
      />
    </FormItem>
  </div>
</template>

<script setup lang="ts">
  import { Select, Button, FormItem } from 'ant-design-vue';
  import { onMounted, ref, watch } from 'vue';
  import { notificationsParams } from '/@/api/thingsborad/notification/model/notificationsModel';
  import { getTargetsList } from '/@/api/thingsborad/notification/notification';
  import Icon from '/@/components/Icon/src/Icon.vue';
  import { ruleTimeSelectList, ruleAlarmSelectList } from '../data/notification.data';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { nanoid } from 'nanoid';
  const { createMessage } = useMessage();
  const prpos = defineProps(['isClose']);
  const emits = defineEmits(['firstRecipient', 'timeFlag']);
  //请求参数
  let params = ref<notificationsParams>({
    pageSize: 50,
    page: 0,
    sortProperty: 'name',
    sortOrder: 'ASC',
    notificationType: 'ALARM',
  });

  //
  let firstSelect = ref<any>();

  //添加收件人下拉列表数据
  let recipientSelectOptions = ref<any>([]);
  //其他收件人
  let recipientList = ref<any>([]);
  onMounted(() => {
    //初始化收件人列表
    recipientList.value.push({
      time: '',
      recipient: [],
      id: nanoid(),
    });
  });

  //监听弹窗是否关闭
  watch(
    () => prpos.isClose,
    (nVal) => {
      if (nVal === true) {
        firstSelect.value = [];
        recipientList.value = [];
      }
    },
  );
  //获取
  async function getRecipientSelectList(params: notificationsParams) {
    try {
      const targetsData = await getTargetsList(params);
      //判空
      if (targetsData.data.length === 0) {
        return;
      }
      targetsData.data.forEach((item) => {
        recipientSelectOptions.value.push({
          value: item.id.id,
          label: item.name,
        });
      });
      // 根据需要处理数据并更新组件状态
    } catch (error) {
      console.error('获取数据时出错：', error);
      // 处理错误情况
    }
  }
  //输入检索选项
  const filterOption = (input: string, option: any) => {
    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };
  //获取选择时间
  function getSelectTime(value, index) {
    recipientList.value[index].time = value;
    emits('timeFlag', { value, index });
  }
  //获取选择收件人
  function getSelectRecipient(value, index) {
    recipientList.value[index].recipient = value;
    emits('firstRecipient', { value, index });
  }
  //添加阶段
  function addStage() {
    if (recipientList.value[recipientList.value.length - 1].recipient.length === 0) {
      createMessage.error('此条收件人信息还未填写');
      return;
    }
    recipientList.value.push({
      time: '',
      recipient: [],
      id: nanoid(),
    });
  }
  function deleteRecipientByIndex(index) {
    recipientList.value.splice(index, 1);
  }
</script>

<style scoped lang="less">
  .upgrading-chain-box {
    border: 1px solid #d4d4d4;
    border-radius: 5px;
    padding: 10px;
    .first-recipient-box {
      display: flex;
      align-items: center;
      margin-top: 10px;
      margin-bottom: 10px;
      span {
        width: 150px;
        color: #202020;
        font-size: 15px;
      }
    }
  }
  .vben-basic-form,
  .ant-form-item:not(.ant-form-item-with-help) {
    margin-bottom: 0;
  }
</style>
